<template>
  <div id="side-bar">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item 
      v-for="(item,index) in categoryList" :key="index" 
      :title="item.cat_name" 
      @click="sideItemClick"
      />
    </van-sidebar>
  </div>
</template>

<script>
import Vue from 'vue';
import { Sidebar, SidebarItem } from 'vant';
import 'vant/lib/sidebar/style'
import 'vant/lib/sidebar-item/style'
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  name:"SideBar",
  data() {
    return {
      activeKey:0,
      categoryList:[]
    }
  },
  created() {
    this.$http({
      url:"/api/public/v1/categories",
      methods:"get"
    }).then(res => {
      this.categoryList = res.data.message
      this.$emit("getList",this.categoryList[0].children)
    })
  },
  mounted() {
    
  },
  methods:{
    sideItemClick(i){
      this.$emit("getList",this.categoryList[i].children)
    }
  }
}
</script>

<style scoped>
  #side-bar{
    height: calc(100vh - 60px - 54px - 50px);
    overflow: auto;
  }
  /* 隐藏滚动条 */
  #side-bar::-webkit-scrollbar{
    width: 0px;
  }
  .van-sidebar{
    width: 100px;  
  }
  .van-sidebar-item{
    border-bottom: 1px solid #eee;
  }
</style>